<template>
  <view class="content">
    <view class="content-header"><image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image></view>
    <view class="content-body">
      <!-- 头部 -->
      <view class="body-header">
        <view style="display: flex; align-items: center; width: 50%; ">
          <view style="width: 10rpx;height: 80%;margin-right: 10rpx;"><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
          {{ workDetails.jobName }}
        </view>
        <view style="width: 30%;display: flex;align-items: center;color: red; font-size: 28rpx;">{{ workDetails.startSalary }}-{{ workDetails.endSalary }}元</view>
        <view v-if="idshow !== ''" style="width: 20%;display: flex;align-items: center; justify-content: center;">
          <view v-if="workDetails.isCollection === 0" @click="collectionChange" style="width: 50rpx; height: 50rpx;">
            <image src="https://small.qaqavr.com/img/zhongrui/star.png" style="width: 100%;height: 100%;" mode=""></image>
          </view>
          <view v-else @click="quitCollectionChange" style="width: 50rpx; height: 50rpx;">
            <image src="https://small.qaqavr.com/img/zhongrui/starclick.png" style="width: 100%;height: 100%;" mode=""></image>
          </view>
        </view>
      </view>

      <view class="daihao">职位代号:{{ workDetails.jobType.keyWord + workDetails.jobNum }}</view>
      <view style="width: 100%; margin-top: 20rpx; padding-left: 20rpx; font-size: 28rpx;">经验要求:5-10 年</view>
      <view style="width: 100%; margin-top: 20rpx; padding-left: 20rpx; font-size: 28rpx;">招聘人数: {{ workDetails.recruitmentNum }} 人</view>

      <view class="tag">
        <text class="tag-sty" v-for="(item, index) in workDetails.keyList" :key="index">{{ item }}</text>
      </view>

      <view class="zhize">
        <view style="width: 10rpx;height: 80%;margin-right: 10rpx;"><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
        岗位职责
      </view>

      <view class="zhizecontent">
        <view style="font-size: 24rpx;" v-html="workDetails.jobDuties" ></view>
      </view>
      
      <view class="zhize">
        <view style="width: 10rpx;height: 80%;margin-right: 10rpx;"><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
        任职要求
      </view>
      
      <view class="zhizecontent">
        <view style="font-size: 24rpx;" v-html="workDetails.jobSpecification" ></view>
      </view>
      
      <view class="zhize">
        <view style="width: 10rpx;height: 80%;margin-right: 10rpx;"><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
        岗位福利
      </view>
      
      <view class="zhizecontent">
        <view style="font-size: 24rpx;" v-html="workDetails.jobWelfare" ></view>
      </view>
      
      <view class="fotter-button">
        <view style="width: 200rpx; height: 70rpx; border: 2rpx solid #2589FF; border-radius: 25rpx;" @click="joinWork">立即报名</view>
        <view style="width: 200rpx; height: 70rpx;background-color: #2589ff;border-radius: 25rpx; color: #FFFFFF;" @click="Iwant">我要推荐</view>
        
      </view>
    </view>
    <!-- 我要推荐的弹窗 -->
     <view class="tanchaung" v-if="showtanchaung">
        <view class="close"><u-icon name="close" color="#a5a5a5" bold size="28" @click="closetankuang"></u-icon></view>
        <u-button type="primary" text="内部推荐" @click="detailsTuijian"></u-button>
        <u-button type="success" text="外部推荐" @click="detailsOutTuijian"></u-button>
      </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      workDetails: {},
      idshow: uni.getStorageSync('openid'),
      showtanchaung: false,
      openId: '',
      id: 1,
      num: 2
    };
  },
  onLoad(options) {
    this.openId = uni.getStorageSync('openid');
    this.addOne();
    console.log(this.workDetails);
    if (options.item == undefined) {
      return;
    } else {
      this.workDetails = JSON.parse(options.item);
      this.workDetails.jobWelfare = this.preText(this.workDetails.jobWelfare);
      this.workDetails.jobDuties = this.preText(this.workDetails.jobDuties);
      this.workDetails.jobSpecification = this.preText(this.workDetails.jobSpecification);
    }
    this.getshoucang();
  },
  methods: {
    preText(pretext) {
      return pretext
        .replace(/\r\n/g, '<br/>')
        .replace(/\n/g, '<br/>')
        .replace(/\s/g, '&nbsp;');
    },

    // 访问加1
    async addOne() {
      await uni.$http.get('/job/addBrowseJobNum');
    },
    // 收藏
    async collectionChange() {
      this.workDetails.isCollection = 1;
      console.log('this.workDetails', this.workDetails);
      const { data } = await uni.$http.get('/job/collectionJob?jobId=' + this.workDetails.id + '&openId=' + this.openId);
      console.log('啊哈哈哈', data);
      if (data.statusCode !== 200) {
        return;
      } else {
        uni.showToast({
          title: data.message,
          icon: 'success'
        });
        // setTimeout(function() {
        //   this.getshoucang();
        // }, 700);
      }
    },
    // 取消收藏
    async quitCollectionChange() {
      this.workDetails.isCollection = 0;
      const { data } = await uni.$http.get('/job/collectionJob?jobId=' + this.workDetails.id + '&openId=' + this.openId);
      console.log('this.workDetails', this.workDetails);
      if (data.statusCode !== 200) {
        return;
      } else {
        uni.showToast({
          title: data.message,
          icon: 'success'
        });
      }
    },
    // 查询是否收藏
    async getshoucang() {
      const { data } = await uni.$http.get('/job/findCollection?jobId=' + this.workDetails.id + '&openId=' + this.openId || '');
      if (data.statusCode !== 200) {
        return;
      } else {
        this.workDetails.isCollection = data.data;
      }
    },
    // 立即报名
    joinWork() {
      console.log('this.workDetails', this.workDetails);
      const openid = uni.getStorageSync('openid');
      if (openid == '') {
        uni.navigateTo({
          url: '../../pages/loginpage/loginpage'
        });
      } else {
        const obj = {};
        obj.jobType = this.workDetails.jobType;
        obj.jobNum = this.workDetails.jobNum;
        console.log('我是obj', obj);
        if (this.workDetails.recruitmentType === 1) {
          uni.navigateTo({
            url: '../sociologyEnrolment/sociologyEnrolment?workDetails=' + JSON.stringify(obj)
          });
        } else {
          uni.navigateTo({
            url: '../studentEnrolment/studentEnrolment?workDetails=' + JSON.stringify(obj)
          });
        }
      }
    },
    // 打开弹框
    Iwant() {
      const openid = uni.getStorageSync('openid');
      if (openid == '') {
        uni.navigateTo({
          url: '../../pages/loginpage/loginpage'
        });
      } else {
        this.showtanchaung = true;
      }
    },
    closetankuang() {
      this.showtanchaung = false;
    },
    //  内部推荐
    detailsTuijian() {
      const obj = {};
      obj.jobType = this.workDetails.jobType;
      obj.jobNum = this.workDetails.jobNum;
      console.log('我是obj', obj);
      // 先判断是社招还是校招
      if (this.workDetails.recruitmentType === 1) {
        uni.navigateTo({
          url: '../defaultTuijianShehui/defaultTuijianShehui?id=' + this.id + '&workDetails=' + JSON.stringify(obj)
        });
      } else {
        uni.navigateTo({
          url: '../defaultTuijianschool/defaultTuijianschool?id=' + this.id + '&workDetails=' + JSON.stringify(obj)
        });
      }
    },
    // 外部推荐
    detailsOutTuijian() {
      const obj = {};
      obj.jobType = this.workDetails.jobType;
      obj.jobNum = this.workDetails.jobNum;
      console.log('我是obj', obj);
      // 先判断是社招还是校招
      if (this.workDetails.recruitmentType === 1) {
        uni.navigateTo({
          url: '../defaultTuijianShehui/defaultTuijianShehui?id=' + this.num + '&workDetails=' + JSON.stringify(obj)
        });
      } else {
        uni.navigateTo({
          url: '../defaultTuijianschool/defaultTuijianschool?id=' + this.num + '&workDetails=' + JSON.stringify(obj)
        });
      }
    },
    open() {
      console.log('open');
    },
    close() {
      this.show = false;
      console.log('close');
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  .content-header {
    // height: 500rpx;
    image {
      width: 100%;
      height: 350rpx;
    }
  }
  .content-body {
    position: absolute;
    top: 100rpx;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 90%;
    margin-bottom: 50rpx;
    padding: 20rpx;
    border-radius: 20rpx;
    border: 2rpx solid #ccc;
    background-color: #ffffff;
    .body-header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50rpx;
    }
  }
  .daihao {
    width: 100%;
    padding-top: 20rpx;
    padding-left: 50rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: SimHei;
    font-weight: 400;
    color: #666666;
  }
  .tag {
    padding: 0 20rpx;
    margin-top: 30rpx;
    display: flex;
    flex-wrap: wrap;
    .tag-sty {
      width: fit-content;
      display: flex;
      padding: 0 5rpx;
      align-items: center;
      color: #808080;
      margin-top: 5rpx;
      margin-right: 5rpx;
      font-size: 24rpx;
      border-radius: 20rpx;
      border: 2rpx solid #808080;
    }
  }

  .zhize {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    width: 100%;
    height: 50rpx;
  }
  
  .zhizecontent{
    margin-top: 30rpx;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    // height: 300rpx;
    border-radius: 20rpx;
    border: 2rpx dashed #ccc;
  }
  
  .fotter-button {
    margin-top: 20rpx;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    view {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #2589FF;
      font-size: 28rpx;
    }
  }
    .tanchaung {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      display: flex;
      flex-direction: column;
      padding: 5% 20%;
      border-radius: 20rpx;
      box-sizing: border-box;
      justify-content: space-around;
      width: 70%;
      height: 300rpx;
      background-color: #ffffff;
      box-shadow: 0 0 5rpx #ccc;
      .close {
        position: absolute;
        top: 10rpx;
        right: 20rpx;
      }
    }
}

</style>
